<template>
<div class="all-boxf">
    <ul class="fTab">
      <li @click="tabClick(index)" v-for="(item, index) in dateList" :class="{'seletedTab': isActive == index}" :key="index">{{item}}</li>
    </ul>
    <div class="box1">
      <echarts2 id="echarts1" :option="option1" :styles="styles1"></echarts2>
    </div>
</div>
</template>

<script>
  import echarts from 'echarts'
  import echarts2 from '@/components/echarts.vue'

  export default {
    name: 'Five',
    props: {
      chartData: {
        type: Array,
        default: () => {
          return []
          // return [600, 900, 1100, 700]
        }
      },
      nameList: {
        type: Array,
        default: () => {
          return []
          // return ["安全教育", "转发分享", "现场扫码", "系统推送"]
        }
      }
    },
    data () {
      var colors = ['#7cf317', '#d10eb1', '#4ddbff'];
      return {
        dateList: [
          '今日',
          '本周',
          '本月'
        ],
        isActive: 0,
        styles1: {
          width: '100%',
          height: '100%',
          margin: '0 auto'
        },
        option1: {
          barWidth: 10,
          // barGap:'80%',
          xAxis: {

            type : 'category',
            // data: ["安全教育", "转发分享", "现场扫码", "系统推送"],
            data: this.nameList,
            // 去掉y轴坐标线
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 设置字体
            axisLabel: {
                    show: true,
                    textStyle: {
                      color: '#ffffff',
                      fontSize: 12
                    }
                }
          },

          series: [{
            type: 'bar',
            // data: [600, 900, 1100, 700],
            data: this.chartData,
            itemStyle: {
              normal: {
                barBorderRadius:[3, 3, 0, 0],
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#39FBA4'
                  }, {
                      offset: 1,
                      color: '#27E0F7'
                  }]),
              }
            }
          }],
          yAxis : [
              {
                  type : 'value',
                  // max : 1200,
                  // min: 400,
                  splitNumber: 4,
                  // 去掉刻度
                  axisTick: {
                    show: false
                  },
                  bottom: 10,
                  // show : false,
                  // 去掉y轴坐标线
                  axisLine: {
                    show: false
                  },
                  //网格样式
                  splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#0d1b4b'],
                        width: 1,
                        type: 'solid'
                    }
                  },
                  // 设置字体
                  axisLabel: {
                          show: true,
                          textStyle: {
                            color: '#ffffff',
                            fontSize: 12
                          }
                      }
              }
          ],
                    // 设置图标的位置
          grid:{
            x:50,
            x2:50,
            // y:10,
            y2:20,
            containLabel: true
          },
        },

      }
    },
    components: {
      echarts2
    },
    methods: {
      tabClick(index) {
        this.isActive = index
      }
    }
  }
</script>
<style lang="scss">
.all-boxf{
  .fTab{
    float: right;
    width: 60px;
    height: 12px;
    display: flex;
    border: 0.5px solid #44F0FF;
    border-radius: 3px;
    margin-right: 10px;
    margin-top: 10px;
    overflow: hidden;
    li{
      width: 40px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #44F0FF;
      font-size: 6px;
      cursor: pointer;
    }
    .seletedTab{
      background: #152c48;
    }
  }
  .box1{
    // background: pink;
    width: 100%;
    height: calc(100% - 22px);
  }
  width: 100%;
  height: calc(100% - 24px);
}
</style>
